import { boot } from 'quasar/wrappers';
import { createI18n, I18n } from 'vue-i18n';
import { nextTick, WritableComputedRef } from 'vue';

import messages from 'src/i18n';
let i18n: I18n;
export default boot(({ app }) => {
  i18n = createI18n({
    locale: 'en-US',
    globalInjection: true,
    messages,
  });

  // Set i18n instance on app
  app.use(i18n);
});
export function setI18nLanguage(locale: string) {
  if (i18n.mode === 'legacy') {
    i18n.global.locale = locale;
  } else {
    (i18n.global.locale as WritableComputedRef<string>).value = locale;
  }
  /**
   * NOTE:
   * If you need to specify the language setting for headers, such as the `fetch` API, set it here.
   * The following is an example for axios.
   *
   * axios.defaults.headers.common['Accept-Language'] = locale
   */
  document.querySelector('html')!.setAttribute('lang', locale);
}
export async function loadLocaleMessages(locale: string) {
  // load locale messages with dynamic import
  const messages = await import(
    /* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json`
  );

  // set locale and locale message
  i18n.global.setLocaleMessage(locale, messages.default);

  return nextTick();
}
